<script setup lang="ts">
import { list, actions } from './data'
import { ActionOptioins, ListItem } from '../../components/list/src/types.ts'

let clickItem = (item: ListItem, index: number) => {
  console.log(item, index)
}

let clickAction = (action: ActionOptioins, i: number) => {
  console.log(action, i)
}
</script>

<template>
  <div>
    <!-- <m-notification :value="50"></m-notification>
    <br />
    <br />
    <m-notification :value="50" :max="30"></m-notification>
    <br />
    <br />
    <m-notification :value="50" isDot></m-notification>
    <br />
    <br />
    <m-notification :value="50" icon="ChatRound"></m-notification> -->
    <m-notification :value="50">
      <template #default>
        <m-list
          @clickItem="clickItem"
          @clickAction="clickAction"
          :list="list"
          :actions="actions"
        ></m-list>
      </template>
    </m-notification>
  </div>
</template>

<style lang="scss" scoped></style>
